<template>
    <div>
        <page-header :title="$route.meta.title" content="提现列表" />
        <page-main>
            <div v-auth="'withdraw.create'" class="m-b">
                <el-button type="primary" icon="el-icon-plus" class=" m-r" @click="onCreate">
                    提现
                </el-button>
                <span class="m-r">总收入：<span style="color: red;">¥{{ withdrawInfo.order_pice }}</span></span>
                <span class="m-r">已提现余额：<span style="color: red;">¥{{ withdrawInfo.out_price }}</span></span>
                <span class="m-r">可提现余额：<span style="color: red;">¥{{ withdrawInfo.price }}</span></span>
            </div>
            <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe
                      highlight-current-row
            >
                <el-table-column type="index" width="50" label="#" />
                <el-table-column prop="price" label="提现金额（元）" :formatter="row => `¥${row.price}`" align="center" />
                <el-table-column label="提现用户">
                    <template slot-scope="scope">
                        <div>{{ scope.row.user.nickname }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="申请时间"
                                 :formatter="row => `${$dayjs(row.created_at * 1000).format('YYYY-MM-DD HH:mm:ss')}`"
                />
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <!-- 申请状态 0申请中 1 通过 2 不通过 -->
                        <el-tag v-if="scope.row.type === '0'" type="info">申请中</el-tag>
                        <el-tag v-else-if="scope.row.type === '1'" type="success">通过</el-tag>
                        <el-tag v-else-if="scope.row.type === '2'" type="danger">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-if="auth('withdraw.audit')" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <div v-if="!['1','2'].includes(scope.row.type)">
                            <el-button type="primary" size="mini" plain @click="onPass(scope.row, 1)">通过</el-button>
                            <el-button type="danger" size="mini" plain @click="onPass(scope.row, 2)">不通过</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page.page" :total="page.total" :page-size.sync="page.size"
                           :page-sizes.sync="page.sizes" layout="total, sizes, ->, prev, pager, next, jumper" background
                           @size-change="refresh" @current-change="getDataList"
            />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :withdraw-info="withdrawInfo" @success="dialogCallback" />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index'
import { auth } from '@/util'

export default {
    components: {
        FormDialog
    },
    mixins: [mixin],
    data() {
        return {
            form: {
                username: '',
                nickname: ''
            },
            api: {
                list: 'member/cashout/tabulation'
            },
            withdrawInfo: {}
        }
    },
    created() {
        this.getDataList()
        this.getWithdrawInfo()
    },
    methods: {
        auth,
        onPass(row, status) {
            this.$confirm('确定要操作吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.post('member/cashout/update', { id: row.id, type: status }).then(() => {
                    this.getDataList()
                })
            })
        },
        getWithdrawInfo() {
            this.$api.post('member/cashout/cash', {}).then(res => {
                console.log(res)
                this.withdrawInfo = res.data.data
            })
        },
        dialogCallback() {
            this.getDataList()
            this.getWithdrawInfo()
        }
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    margin-top: 20px;
}
</style>
